<script src="<?= base_url() ?>js/facebox.js" type="text/javascript"></script>
<?php echo link_tag('css/facebox.css'); ?>
<div class="content">
    <div class="wholeDiv">
        <style>

            .type_report {
                background-image: url('<?= base_url() ?>css/images/unchecked.png');
                background-position: 8px 1px;
                background-repeat: no-repeat;
                padding-top: 3px;
                padding-left: 33px;
                font-size: 11px;
                height: 20px;
                text-align: left;
                color: gray;
            }

            .checkbox_checked {
                background-image: url('<?= base_url() ?>css/images/checked.png');
                background-position: 8px 1px;
                background-repeat: no-repeat;
                color: black;
            }

                /* css for timepicker */
            .ui-timepicker-div .ui-widget-header {
                margin-bottom: 8px;
            }

            .ui-timepicker-div dl {
                text-align: left;
            }

            .ui-timepicker-div dl dt {
                height: 25px;
                margin-bottom: -25px;
            }

            .ui-timepicker-div dl dd {
                margin: 0 10px 10px 65px;
            }

            .ui-timepicker-div td {
                font-size: 90%;
            }

            .ui-tpicker-grid-label {
                background: none;
                border: none;
                margin: 0;
                padding: 0;
            }

            .ui-timepicker-rtl {
                direction: rtl;
            }

            .ui-timepicker-rtl dl {
                text-align: right;
            }

            .ui-timepicker-rtl dl dd {
                margin: 0 65px 10px 10px;
            }

            #ui-datepicker-div {
                font-size: 10px;
            }

        </style>
        <link rel="stylesheet" media="all" type="text/css"
              href="http://code.jquery.com/ui/1.9.1/themes/smoothness/jquery-ui.css"/>
        <script src="<?= base_url() ?>js/jquery-ui-timepicker-addon.js" type="text/javascript"></script>

        <div class='howToAdd'>
            <div style='width:944px;height:28px;margin-left:4px;'>
                <div style='font-family: Arial;font-size:16px;font-weight:bold;text-align: center;padding-top: 4px;'>
                    Stačia 4 jednoduché kroky pre úspešné pridanie udalosti...
                </div>
            </div>
            <div class='add_rep_steps'>
                <span class='step' id='s1'>1. krok</span><span id='s1r'></span>

                <div class='step_text'>Kliknite na žiadané miesto na mape</div>
            </div>
            <div class='add_rep_steps'>
                <span class='step' id='s2'>2. krok</span><span id='s2r'></span>

                <div class='step_text'>Klikite na vytvorenú značku <img src="<?= base_url() ?>css/images/zipymarker.png"
                                                                        style="width:20px;height:20px;vertical-align:middle;">
                </div>
            </div>
            <div class='add_rep_steps'>
                <span class='step' id='s3'>3. krok</span><span id='s3r'></span>

                <div class='step_text'>Vyberte typ udalosti, popr. približný čas jej videnia</div>
            </div>
            <div class='add_rep_steps'>
                <span class='step' id='s4'>4. krok</span><span id='s4r'></span>

                <div class='step_text'>Odošlite udalosť</div>
            </div>
        </div>
        <div class="map">
            <?php echo $map['html']; ?>
        </div>
        <div id="address" style='display:none;'></div>
    </div>
</div>
